<template>
  <div>
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="借款需求" name="first">
        <el-descriptions
          class="margin-top"
          title="借款需求"
          :column="3"
          :size="size"
          border
        >
          <template slot="extra">
            <el-button type="primary" size="small" @click="saveOpinion"
              >保存</el-button
            >
          </template>
          <template slot="extra">
            <el-button type="primary" size="small" @click="goback"
              >返回</el-button
            >
          </template>
          <el-descriptions-item>
            <template slot="label"> 借款金额 </template>
            {{ this.borrwing.bmmoney }}
          </el-descriptions-item>
          <br />
          <el-descriptions-item>
            <template slot="label"> 产品名称 </template>
            {{ this.borrwing.bmname }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 还款方式 </template>
            {{ this.borrwing.repayment }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 期限类型 </template>
            {{ this.borrwing.termtype }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 期限 </template>
            {{ this.borrwing.term }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 月利率 </template>
            {{ this.borrwing.monthlyrate }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 手续费率 </template>
            {{ this.borrwing.procedurerate }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 违约率 </template>
            {{ this.borrwing.defaultrate }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 借款主体 </template>
            {{ this.borrwing.loanprincipal }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 借款用途 </template>
            {{ this.borrwing.purpose }}
          </el-descriptions-item>
        </el-descriptions>

        <el-descriptions
          class="margin-left"
          title="流程信息"
          :column="1"
          :size="size"
          border
        >
          <el-descriptions-item>
            <template slot="label"> 处理意见 </template>
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 意见内容 </template>
            <el-input
              v-model="borrwing.opinion"
              placeholder="请输入内容"
            ></el-input>
          </el-descriptions-item>
        </el-descriptions>
      </el-tab-pane>
      <el-tab-pane label="基本信息" name="second">
        <el-descriptions
          class="margin-top"
          title="基本信息"
          :column="3"
          :size="size"
          border
        >
          <el-descriptions-item>
            <template slot="label"> 企业名称 </template>
            {{ this.info.epname }}
          </el-descriptions-item>

          <el-descriptions-item>
            <template slot="label"> 社会信用代码 </template>
            {{ this.info.epcode }}
          </el-descriptions-item>

          <el-descriptions-item>
            <template slot="label"> 行业类型 </template>
            {{ this.info.epitype }}
          </el-descriptions-item>

          <el-descriptions-item>
            <template slot="label"> 企业创立时间 </template>
            {{ this.info.epetime }}
          </el-descriptions-item>

          <el-descriptions-item>
            <template slot="label"> 进出口许可证 </template>
            {{ this.info.epcapital }}
          </el-descriptions-item>

          <el-descriptions-item>
            <template slot="label"> 工商注册资金 </template>
            {{ this.info.epblnumber }}
          </el-descriptions-item>

          <el-descriptions-item>
            <template slot="label"> 所有制 </template>
            {{ this.info.eptype }}
          </el-descriptions-item>

          <el-descriptions-item>
            <template slot="label"> 员工人数 </template>
            {{ this.info.epempnumber }}
          </el-descriptions-item>
        </el-descriptions>
      </el-tab-pane>
      <el-tab-pane label="企业附件" name="third">
        <el-descriptions
          class="margin-top"
          title="企业附件"
          :column="2"
          :size="size"
          border
        >
          <el-descriptions-item>
            <div
              class="demo-image__placeholder"
              v-for="(item, i) in srcimg"
              :key="i"
            >
              <div class="block">
                <el-image :src="item.aurl"></el-image>
              </div>
            </div>
            <el-upload
              action="http://localhost:8082/file/upload"
              list-type="picture-card"
              :on-preview="handlePictureCardPreview"
              :on-remove="handleRemove"
              :data="insertProgram"
            >
              <i class="el-icon-plus"></i>
            </el-upload>
            <el-dialog :visible.sync="dialogVisible">
              <img width="100%" :src="dialogImageUrl" alt="" />
            </el-dialog>
          </el-descriptions-item>
        </el-descriptions>
      </el-tab-pane>
      <el-tab-pane label="审批历史" name="fourth">
        <el-descriptions
          class="margin-top"
          title="审批历史"
          :column="1"
          :size="size"
          border
        >
          <el-descriptions-item>
            <template>
              <el-table :data="historyquery" stripe style="width: 100%">
                <el-table-column prop="step" label="步骤" width="180">
                </el-table-column>
                <el-table-column prop="agent" label="经办人" width="180">
                </el-table-column>
                <el-table-column prop="suggestion" label="处理意见">
                </el-table-column>
                <el-table-column prop="processingtime" label="意见时间">
                </el-table-column>
              </el-table> </template></el-descriptions-item></el-descriptions></el-tab-pane
    ></el-tabs>
  </div>
</template>
          </el-descriptions-item>
      </el-descriptions>
      
    </el-tab-pane>
    
    </el-tabs>
    
  </div>
  
</template>


<script>
export default {
  data() {
    return {
      insertProgram:{
      plid:''
      },
      uploadData: null,
      dialogImageUrl: "",
      dialogVisible: false,
      size: "",
      bmid: "",
      activeName: "first",
      borrwing: {
        bmmoney: 0,
        bmname: "",
        repayment: "",
        termtype: "",
        term: "",
        monthlyrate: "",
        procedurerate: "",
        defaultrate: "",
        loanprincipal: "",
        purpose: "",
        opinion: "",
      },
      historyquery: [
        {
          step: "",
          agent: "",
          suggestion: "",
          processingtime: "",
        },
      ],
      info: {},
      plname: "",
      plid: "",
      srcimg: [
        {
          aid: "",
          aname: "",
          aurl: "",
          plid: "",
        },
      ],
      imageUrl: "",
    };
  },
  created() {
    this.bmid = this.$route.query.bmid;
    this.plname = this.$route.query.plname;
    this.plid = this.$route.query.plid;
    this.insertProgram.plid = this.$route.query.plid
    this.getBorrowing();
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
      if (tab.name == "second") {
        this.goinfo();
      }
      if (tab.name == "third") {
        this.fileimg();
      }
      if (tab.name == "fourth") {
        this.histroy();
      }
      if (tab.name == "five") {
        this.goinfo();
      }
      if (tab.name == "six") {
        this.goinfo();
      }
    },
    getBorrowing() {
      console.log(this.bmid);
      console.log(this.plname);
      this.$axios
        .get("http://localhost:8082/borrowDemand/get/" + this.bmid)
        .then((resp) => {
          console.log(resp);
          this.borrwing = resp.data.data;
        });
    },
    goback() {
      this.$router.push("/preloan");
    },
    saveOpinion() {
      this.$axios
        .post("http://localhost:8082/borrowDemand/update/" + this.bmid, {
          opinion: this.borrwing.opinion,
        })
        .then((resp) => {
          this.$router.push("/preloan");
        });
    },
    goinfo() {
      this.$axios
        .get("http://localhost:8082/preloan/getInfo", {
          params: {
            plname: this.plname,
          },
        })
        .then((resp) => {
          console.log(resp);
          this.info = resp.data.data.pageBeanList[0];
        });
    },
    histroy() {
      this.$axios
        .get("http://localhost:8082/preloan/history/" + this.plid)
        .then((resp) => {
          console.log(resp);
          this.historyquery = resp.data.data;
        });
    },
     handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      },
    fileimg() {
      this.$axios
        .get("http://localhost:8082/file/file/" + this.plid)
        .then((resp) => {
          this.srcimg = resp.data.data;
        });
    },
  },
};
</script>

<style>
</style>